<template>
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" @click="handleAdd" icon="plus"> 添加标签 </a-button>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table 
        ref="table"
        size="middle"
        rowKey="id"
        :columns="tableColumns"
        :dataSource="tableData"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <div slot="action" slot-scope="text, record">
          <a-button @click="handleEdit(record)" type="primary">编辑</a-button>
          <a-popconfirm title="确认删除?" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record.id)">
            <a-button type="danger">删除</a-button>
          </a-popconfirm>
        </div>
      </a-table>
    </div>
    <!-- 表单区域 -->
    <blog-tag-modal ref="modalForm" @ok="closeModal"></blog-tag-modal>
  </a-card>
</template>
<script>
import ApiTree from '@/api/blog/blogTag';
import blogTagModal from './modules/blogTagModal'
import { Slime, crud } from '@/mixins/slime';
export default {
  mixins: [Slime],
  components: { blogTagModal },
  data() {
    return {
      tableData: [],
      tableColumns: [
        { title: '标签名字', dataIndex: 'name', align: 'center' },
        { title: '排序', dataIndex: 'sort', align: 'center' },
        {
          title: '操作',
          dataIndex: 'id',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
    };
  },
  methods: {
    //初始化
    loadData(arg){
      this.loadDataPack(arg).then((res) => {
        let data = res;
        this.tableData = data;
      })
    },
    // 删除
    handleDelete(id){
      let ids = [];
      ids.push(id)
      var that = this;
      ApiTree.getDelete(ids)
        .then((res) => {
          if (res.success) {
            that.$message.success('删除成功');
          } else {
            that.$message.warning(res.message);
          }
        })
        .finally(() => {
          that.loadData();
        });
    },
    //新增
    handleAdd(){
      this.$refs.modalForm.add();
      this.$refs.modalForm.title = "添加";
    },
    // 编辑
    handleEdit(record) {
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
    },
  },
  created() {
    crud(ApiTree)
    this.loadData();
    // getList().then((res) => {
    //   if (res.result) {
    //     this.buildUl = res.result;
    //   }
    // });
  },
};
</script>